<template>
  <div class="admin-panel">
    <div class="admin-header">
      <h2>管理员控制台</h2>
      <div class="admin-stats">
        <el-statistic title="总用户数" :value="userStats.totalUsers" />
        <el-statistic title="总设备数" :value="deviceStats.totalDevices" />
        <el-statistic title="在线设备" :value="deviceStats.onlineDevices" />
        <el-statistic title="服务申请" :value="serviceStats.total" />
      </div>
    </div>

    <!-- 功能导航 -->
    <div class="admin-nav">
      <el-tabs v-model="activeTab" @tab-change="handleTabChange">
        <el-tab-pane label="用户管理" name="users">
          <div class="tab-content">
            <div class="section-header">
              <h3>用户管理</h3>
              <el-button type="primary" @click="refreshUsers">
                <el-icon><Refresh /></el-icon>
                刷新
              </el-button>
            </div>
            
            <el-table 
              :data="safeUsers" 
              v-loading="loadingUsers" 
              style="width: 100%" 
              row-key="id"
              :key="'users-table-' + safeUsers.length"
            >
              <el-table-column prop="id" label="ID" width="80" />
              <el-table-column prop="username" label="用户名" width="120" />
              <el-table-column prop="nickname" label="昵称" width="120" />
              <el-table-column prop="email" label="邮箱" width="200" />
              <el-table-column prop="role" label="角色" width="120">
                <template #default="scope">
                  <el-tag v-if="scope.row" :type="getRoleType(scope.row.role) || 'info'">
                    {{ getRoleText(scope.row.role) }}
                  </el-tag>
                  <el-tag v-else type="info">未知</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="status" label="状态" width="100">
                <template #default="scope">
                  <el-tag v-if="scope.row" :type="(scope.row.status === 1 ? 'success' : 'danger') || 'info'">
                    {{ scope.row.status === 1 ? '正常' : '禁用' }}
                  </el-tag>
                  <el-tag v-else type="info">未知</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="createdAt" label="注册时间" width="180" />
              <el-table-column label="操作" width="280" fixed="right">
                <template #default="scope">
                  <div class="action-buttons">
                    <el-button 
                      size="small" 
                      type="primary" 
                      @click="editUser(scope.row)"
                      class="action-btn"
                    >
                      <el-icon><Edit /></el-icon>
                      编辑
                    </el-button>
                    <el-button 
                      size="small" 
                      :type="scope.row && scope.row.status === 1 ? 'warning' : 'success'"
                      @click="toggleUserStatus(scope.row)"
                      class="action-btn"
                    >
                      <el-icon><Lock v-if="scope.row && scope.row.status === 1" /><Unlock v-else /></el-icon>
                      {{ scope.row && scope.row.status === 1 ? '禁用' : '启用' }}
                    </el-button>
                    <el-button 
                      size="small" 
                      type="info" 
                      @click="changeUserRole(scope.row)"
                      v-if="scope.row && scope.row.role !== 'ADMIN'"
                      class="action-btn"
                    >
                      <el-icon><User /></el-icon>
                      改角色
                    </el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>

        <el-tab-pane label="设备管理" name="devices">
          <div class="tab-content">
            <div class="section-header">
              <h3>设备管理</h3>
              <el-button type="primary" @click="refreshDevices">
                <el-icon><Refresh /></el-icon>
                刷新
              </el-button>
            </div>
            
            <el-table 
              :data="safeDevices" 
              v-loading="loadingDevices" 
              style="width: 100%" 
              row-key="id"
              :key="'devices-table-' + safeDevices.length"
            >
              <el-table-column prop="id" label="设备ID" width="80" />
              <el-table-column prop="name" label="设备名称" width="150" />
              <el-table-column prop="deviceTypeId" label="类型" width="100">
                <template #default="scope">
                  {{ scope.row ? getDeviceTypeName(scope.row.deviceTypeId) : '-' }}
                </template>
              </el-table-column>
              <el-table-column prop="userId" label="用户ID" width="80" />
              <el-table-column prop="room" label="房间" width="100" />
              <el-table-column prop="status" label="状态" width="100">
                <template #default="scope">
                  <el-tag v-if="scope.row" :type="(scope.row.status === 1 ? 'success' : 'info') || 'info'">
                    {{ scope.row.status === 1 ? '开启' : '关闭' }}
                  </el-tag>
                  <el-tag v-else type="info">未知</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="isOnline" label="在线状态" width="100">
                <template #default="scope">
                  <el-tag v-if="scope.row" :type="(scope.row.isOnline === 1 ? 'success' : 'danger') || 'info'">
                    {{ scope.row.isOnline === 1 ? '在线' : '离线' }}
                  </el-tag>
                  <el-tag v-else type="info">未知</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="ipAddress" label="IP地址" width="120" />
              <el-table-column label="操作" width="150">
                <template #default="scope">
                  <el-button size="small" @click="viewDeviceDetail(scope.row)">详情</el-button>
                  <el-button size="small" type="danger" @click="deleteDevice(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>

        <el-tab-pane label="服务申请" name="services">
          <div class="tab-content">
            <div class="section-header">
              <h3>服务申请管理</h3>
              <el-button type="primary" @click="refreshServices">
                <el-icon><Refresh /></el-icon>
                刷新
              </el-button>
            </div>
            
            <el-table 
              :data="safeServiceRequests" 
              v-loading="loadingServices" 
              style="width: 100%" 
              row-key="id"
              :key="'services-table-' + safeServiceRequests.length"
            >
              <el-table-column prop="id" label="申请ID" width="80" />
              <el-table-column prop="userId" label="用户ID" width="80" />
              <el-table-column prop="contactPerson" label="联系人" width="100" />
              <el-table-column prop="contactPhone" label="联系电话" width="120" />
              <el-table-column prop="urgencyLevel" label="紧急程度" width="100">
                <template #default="scope">
                  <el-tag v-if="scope.row" :type="getUrgencyType(scope.row.urgencyLevel) || 'info'">
                    {{ getUrgencyText(scope.row.urgencyLevel) }}
                  </el-tag>
                  <el-tag v-else type="info">未知</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="status" label="状态" width="100">
                <template #default="scope">
                  <el-tag v-if="scope.row" :type="getServiceStatusType(scope.row.status) || 'info'">
                    {{ getServiceStatusText(scope.row.status) }}
                  </el-tag>
                  <el-tag v-else type="info">未知</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="appointmentTime" label="预约时间" width="180" />
              <el-table-column prop="createdAt" label="申请时间" width="180" />
              <el-table-column prop="completedBy" label="完成人" width="100">
                <template #default="scope">
                  <span v-if="scope.row && scope.row.completedBy">
                    {{ userCache?.value?.get(scope.row.completedBy) || `用户${scope.row.completedBy}` }}
                  </span>
                  <span v-else>-</span>
                </template>
              </el-table-column>
              <el-table-column prop="completedAt" label="完成时间" width="180" />
              <el-table-column label="操作" width="280" fixed="right">
                <template #default="scope">
                  <div class="action-buttons">
                    <el-button 
                      size="small" 
                      type="info"
                      @click="viewServiceDetail(scope.row)"
                      class="action-btn"
                    >
                      <el-icon><View /></el-icon>
                      详情
                    </el-button>
                    <el-button 
                      size="small" 
                      type="primary" 
                      @click="updateServiceStatus(scope.row, 'IN_PROGRESS')"
                      v-if="scope.row && scope.row.status === 'PENDING'"
                      class="action-btn"
                    >
                      <el-icon><VideoPlay /></el-icon>
                      开始处理
                    </el-button>
                    <el-button 
                      size="small" 
                      type="success" 
                      @click="updateServiceStatus(scope.row, 'COMPLETED')"
                      v-if="scope.row && scope.row.status === 'IN_PROGRESS'"
                      class="action-btn"
                    >
                      <el-icon><Check /></el-icon>
                      完成
                    </el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>

        <el-tab-pane label="系统统计" name="statistics">
          <div class="tab-content">
            <div class="section-header">
              <h3>系统统计</h3>
            </div>
            
            <el-row :gutter="20">
              <el-col :span="6">
                <el-card class="stat-card">
                  <div class="stat-content">
                    <div class="stat-value">{{ userStats.totalUsers }}</div>
                    <div class="stat-label">总用户数</div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card class="stat-card">
                  <div class="stat-content">
                    <div class="stat-value">{{ deviceStats.totalDevices }}</div>
                    <div class="stat-label">总设备数</div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card class="stat-card">
                  <div class="stat-content">
                    <div class="stat-value">{{ deviceStats.onlineDevices }}</div>
                    <div class="stat-label">在线设备</div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6">
                <el-card class="stat-card">
                  <div class="stat-content">
                    <div class="stat-value">{{ serviceStats.total }}</div>
                    <div class="stat-label">服务申请</div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 用户编辑对话框 -->
    <el-dialog v-model="userEditDialogVisible" title="编辑用户" width="500px">
      <el-form :model="editingUser" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="editingUser.username" disabled />
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="editingUser.nickname" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="editingUser.email" />
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="editingUser.role" :disabled="editingUser.role === 'ADMIN'">
            <el-option label="普通用户" value="USER" />
            <el-option label="维修师傅" value="MAINTENANCE" />
            <el-option label="管理员" value="ADMIN" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="userEditDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveUser">保存</el-button>
      </template>
    </el-dialog>

    <!-- 服务详情对话框 -->
    <el-dialog v-model="serviceDetailDialogVisible" title="服务申请详情" width="600px" @close="selectedService = null">
      <div v-if="selectedService" class="service-detail">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="申请ID">{{ selectedService.id }}</el-descriptions-item>
          <el-descriptions-item label="用户ID">{{ selectedService.userId }}</el-descriptions-item>
          <el-descriptions-item label="联系人">{{ selectedService.contactPerson }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ selectedService.contactPhone }}</el-descriptions-item>
          <el-descriptions-item label="服务地址" :span="2">{{ selectedService.serviceAddress }}</el-descriptions-item>
          <el-descriptions-item label="预约时间">{{ selectedService.appointmentTime }}</el-descriptions-item>
          <el-descriptions-item label="紧急程度">{{ getUrgencyText(selectedService.urgencyLevel) }}</el-descriptions-item>
          <el-descriptions-item label="设备信息" :span="2">{{ selectedService.deviceInfo }}</el-descriptions-item>
          <el-descriptions-item label="问题描述" :span="2">{{ selectedService.problemDescription }}</el-descriptions-item>
          <el-descriptions-item label="状态">{{ getServiceStatusText(selectedService.status) }}</el-descriptions-item>
          <el-descriptions-item label="申请时间">{{ selectedService.createdAt }}</el-descriptions-item>
          <el-descriptions-item label="完成人" v-if="selectedService && selectedService.completedBy">
            {{ userCache?.value?.get(selectedService.completedBy) || `用户${selectedService.completedBy}` }}
          </el-descriptions-item>
          <el-descriptions-item label="完成时间" v-if="selectedService.completedAt">
            {{ selectedService.completedAt }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
// eslint-disable-next-line no-unused-vars
import { Refresh, Edit, Lock, Unlock, User, View, VideoPlay, Check } from '@element-plus/icons-vue'
import { userAPI, deviceAPI, serviceRequestAPI, adminAPI } from '../services/api.js'
import { useAuthStore } from '../store/authStore.js'

export default {
  name: 'AdminPanel',
  components: {
    Refresh,
    Edit,
    Lock,
    Unlock,
    User,
    View,
    VideoPlay,
    Check
  },
  setup() {
    const activeTab = ref('users')
    const loadingUsers = ref(false)
    const loadingDevices = ref(false)
    const loadingServices = ref(false)
    
    const userEditDialogVisible = ref(false)
    const serviceDetailDialogVisible = ref(false)
    const editingUser = ref({})
    const selectedService = ref(null)
    
    // 认证状态
    const authStore = useAuthStore()
    
    // 数据
    const users = ref([])
    const allDevices = ref([])
    const serviceRequests = ref([])
    const userCache = ref(new Map()) // 用户信息缓存
    
    // 确保数据不为null
    const safeUsers = computed(() => users.value || [])
    const safeDevices = computed(() => allDevices.value || [])
    const safeServiceRequests = computed(() => serviceRequests.value || [])
    
    // 统计数据
    const userStats = reactive({
      totalUsers: 0
    })
    
    const deviceStats = reactive({
      totalDevices: 0,
      onlineDevices: 0
    })
    
    const serviceStats = reactive({
      total: 0
    })
    
    // 获取所有用户
    const loadUsers = async () => {
      loadingUsers.value = true
      try {
        const response = await userAPI.getAllUsers()
        users.value = response
        userStats.totalUsers = response.length
      } catch (error) {
        ElMessage.error('加载用户列表失败：' + error.message)
      } finally {
        loadingUsers.value = false
      }
    }
    
    // 获取所有设备
    const loadAllDevices = async () => {
      loadingDevices.value = true
      try {
        console.log('开始加载所有设备...')
        const response = await adminAPI.getAllDevices()
        console.log('设备数据:', response)
        allDevices.value = response || []
        
        // 计算设备统计
        deviceStats.totalDevices = allDevices.value.length
        deviceStats.onlineDevices = allDevices.value.filter(device => device.isOnline).length
        
        console.log('设备统计:', deviceStats)
      } catch (error) {
        console.error('加载设备列表失败:', error)
        ElMessage.error('加载设备列表失败：' + error.message)
        allDevices.value = []
        deviceStats.totalDevices = 0
        deviceStats.onlineDevices = 0
      } finally {
        loadingDevices.value = false
      }
    }
    
    // 获取所有服务申请
    const loadServiceRequests = async () => {
      loadingServices.value = true
      try {
        console.log('开始加载所有服务申请...')
        const response = await adminAPI.getAllServiceRequests()
        console.log('服务申请数据:', response)
        serviceRequests.value = response || []
        
        // 批量加载用户昵称
        await loadUserNicknames(serviceRequests.value)
        
        serviceStats.total = serviceRequests.value.length
        console.log('服务申请统计:', serviceStats)
      } catch (error) {
        console.error('加载服务申请列表失败:', error)
        ElMessage.error('加载服务申请列表失败：' + error.message)
        serviceRequests.value = []
        serviceStats.total = 0
      } finally {
        loadingServices.value = false
      }
    }
    
    // 刷新数据
    const refreshUsers = () => loadUsers()
    const refreshDevices = () => loadAllDevices()
    const refreshServices = () => loadServiceRequests()
    
    // 编辑用户
    const editUser = (user) => {
      editingUser.value = { ...user }
      userEditDialogVisible.value = true
    }
    
    // 保存用户
    const saveUser = async () => {
      try {
        await userAPI.updateUser(editingUser.value.id, {
          nickname: editingUser.value.nickname,
          email: editingUser.value.email
        })
        
        if (editingUser.value.role !== users.value.find(u => u.id === editingUser.value.id)?.role) {
          await userAPI.updateUserRole(editingUser.value.id, {
            role: editingUser.value.role
          })
        }
        
        ElMessage.success('用户信息更新成功')
        userEditDialogVisible.value = false
        loadUsers()
      } catch (error) {
        ElMessage.error('更新用户信息失败：' + error.message)
      }
    }
    
    // 切换用户状态
    const toggleUserStatus = async (user) => {
      try {
        const newStatus = user.status === 1 ? 0 : 1
        await userAPI.updateUserStatus(user.id, { status: newStatus })
        ElMessage.success('用户状态更新成功')
        loadUsers()
      } catch (error) {
        ElMessage.error('更新用户状态失败：' + error.message)
      }
    }
    
    // 修改用户角色
    const changeUserRole = (user) => {
      editUser(user)
    }
    
    // 查看设备详情
    const viewDeviceDetail = (device) => {
      console.log('查看设备详情，设备ID:', device.id)
      ElMessage.info('设备详情功能待实现')
    }
    
    // 删除设备
    const deleteDevice = async (device) => {
      try {
        await ElMessageBox.confirm('确定要删除这个设备吗？', '确认删除', {
          type: 'warning'
        })
        
        await deviceAPI.deleteDevice(device.id)
        ElMessage.success('设备删除成功')
        loadAllDevices()
      } catch (error) {
        if (error !== 'cancel') {
          ElMessage.error('删除设备失败：' + error.message)
        }
      }
    }
    
    // 查看服务详情
    const viewServiceDetail = (service) => {
      selectedService.value = service
      serviceDetailDialogVisible.value = true
    }
    
    // 更新服务状态
    const updateServiceStatus = async (service, newStatus) => {
      try {
        const statusData = { status: newStatus }
        
        // 如果是完成状态，添加完成人信息
        if (newStatus === 'COMPLETED') {
          statusData.completedBy = authStore.user.value?.id
        }
        
        await serviceRequestAPI.updateServiceStatus(service.id, statusData)
        ElMessage.success('服务状态更新成功')
        loadServiceRequests()
      } catch (error) {
        ElMessage.error('更新服务状态失败：' + error.message)
      }
    }
    
    // 标签页切换
    const handleTabChange = (tabName) => {
      switch (tabName) {
        case 'users':
          loadUsers()
          break
        case 'devices':
          loadAllDevices()
          break
        case 'services':
          loadServiceRequests()
          break
      }
    }
    
    // 获取角色类型
    const getRoleType = (role) => {
      if (!role) return 'info'
      const typeMap = {
        'ADMIN': 'danger',
        'MAINTENANCE': 'warning',
        'USER': 'success'
      }
      return typeMap[role] || 'info'
    }
    
    // 获取角色文本
    const getRoleText = (role) => {
      if (!role) return '未知'
      const textMap = {
        'ADMIN': '管理员',
        'MAINTENANCE': '维修师傅',
        'USER': '普通用户'
      }
      return textMap[role] || '未知'
    }
    
    // 获取紧急程度类型
    const getUrgencyType = (urgency) => {
      if (!urgency) return 'info'
      const typeMap = {
        'GENERAL': 'info',
        'URGENT': 'warning',
        'VERY_URGENT': 'danger'
      }
      return typeMap[urgency] || 'info'
    }
    
    // 获取紧急程度文本
    const getUrgencyText = (urgency) => {
      if (!urgency) return '未知'
      const textMap = {
        'GENERAL': '一般',
        'URGENT': '紧急',
        'VERY_URGENT': '非常紧急'
      }
      return textMap[urgency] || '未知'
    }
    
    // 获取服务状态类型
    const getServiceStatusType = (status) => {
      if (!status) return 'info'
      const typeMap = {
        'PENDING': 'warning',
        'IN_PROGRESS': 'primary',
        'COMPLETED': 'success',
        'CANCELLED': 'danger'
      }
      return typeMap[status] || 'info'
    }
    
    // 获取服务状态文本
    const getServiceStatusText = (status) => {
      if (!status) return '未知'
      const textMap = {
        'PENDING': '待处理',
        'IN_PROGRESS': '处理中',
        'COMPLETED': '已完成',
        'CANCELLED': '已取消'
      }
      return textMap[status] || '未知'
    }
    
    
    // 获取设备类型名称
    const getDeviceTypeName = (typeId) => {
      const typeMap = {
        1: '智能灯',
        2: '智能空调',
        3: '智能窗帘',
        4: '智能摄像头'
      }
      return typeMap[typeId] || '未知类型'
    }
    
    // 获取用户昵称
    const getUserNickname = async (userId) => {
      if (!userId) return '未知用户'
      
      // 先检查缓存
      if (userCache?.value?.has(userId)) {
        return userCache.value.get(userId)
      }
      
      try {
        // 从API获取用户信息
        const userInfo = await userAPI.getUser(userId)
        const nickname = userInfo.nickname || userInfo.username || `用户${userId}`
        
        // 缓存用户信息
        userCache?.value?.set(userId, nickname)
        return nickname
      } catch (error) {
        console.warn('获取用户信息失败:', error)
        const fallbackNickname = `用户${userId}`
        userCache?.value?.set(userId, fallbackNickname)
        return fallbackNickname
      }
    }
    
    // 批量获取用户昵称
    const loadUserNicknames = async (serviceRequests) => {
      if (!serviceRequests || !Array.isArray(serviceRequests)) {
        return
      }
      
      const userIds = [...new Set(serviceRequests
        .filter(service => service && service.completedBy)
        .map(service => service.completedBy)
      )]
      
      // 限制并发数量，避免过多请求
      const batchSize = 5
      for (let i = 0; i < userIds.length; i += batchSize) {
        const batch = userIds.slice(i, i + batchSize)
        const promises = batch.map(async (userId) => {
          if (!userCache?.value?.has(userId)) {
            await getUserNickname(userId)
          }
        })
        
        await Promise.all(promises)
        
        // 添加小延迟，避免请求过于频繁
        if (i + batchSize < userIds.length) {
          await new Promise(resolve => setTimeout(resolve, 100))
        }
      }
    }
    
    // 组件挂载时加载数据
    onMounted(async () => {
      try {
        // 顺序加载，避免并发请求过多
        await loadUsers()
        await loadAllDevices()
        await loadServiceRequests()
      } catch (error) {
        console.error('组件挂载时加载数据失败:', error)
      }
    })
    
    return {
      activeTab,
      loadingUsers,
      loadingDevices,
      loadingServices,
      userEditDialogVisible,
      serviceDetailDialogVisible,
      editingUser,
      selectedService,
      users,
      allDevices,
      serviceRequests,
      userCache,
      safeUsers,
      safeDevices,
      safeServiceRequests,
      userStats,
      deviceStats,
      serviceStats,
      refreshUsers,
      refreshDevices,
      refreshServices,
      editUser,
      saveUser,
      toggleUserStatus,
      changeUserRole,
      viewDeviceDetail,
      deleteDevice,
      viewServiceDetail,
      updateServiceStatus,
      handleTabChange,
      getRoleType,
      getRoleText,
      getUrgencyType,
      getUrgencyText,
      getServiceStatusType,
      getServiceStatusText,
      getDeviceTypeName
    }
  }
}
</script>

<style scoped>
.admin-panel {
  padding: 20px;
}

.admin-header {
  margin-bottom: 30px;
}

.admin-header h2 {
  margin: 0 0 20px 0;
  color: #333;
  font-size: 28px;
  font-weight: 600;
}

.admin-stats {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}

.admin-nav {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.tab-content {
  padding: 20px 0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h3 {
  margin: 0;
  color: #333;
  font-size: 20px;
}

.stat-card {
  text-align: center;
}

.stat-content {
  padding: 20px;
}

.stat-value {
  font-size: 32px;
  font-weight: 600;
  color: #409eff;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

.service-detail {
  padding: 20px 0;
}

/* 操作按钮美化 */
.action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.action-btn {
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.action-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 表格美化 */
.el-table {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.el-table th {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-weight: 600;
  text-align: center;
}

.el-table td {
  text-align: center;
  vertical-align: middle;
}

.el-table .el-table__row:hover {
  background-color: #f8f9ff;
}

/* 标签美化 */
.el-tag {
  border-radius: 12px;
  font-weight: 500;
  padding: 4px 12px;
}

/* 统计卡片美化 */
.admin-stats {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.admin-stats .el-statistic {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
  transition: transform 0.3s ease;
}

.admin-stats .el-statistic:hover {
  transform: translateY(-2px);
}

.admin-stats .el-statistic .el-statistic__content {
  color: white;
}

.admin-stats .el-statistic .el-statistic__title {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  margin-bottom: 8px;
}

.admin-stats .el-statistic .el-statistic__number {
  color: white;
  font-size: 28px;
  font-weight: 700;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .admin-stats {
    flex-direction: column;
    gap: 15px;
  }
  
  .section-header {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
  }
}
</style>
